<template>
	<view class="addrList">
				<view class="list">
					
							<view class="item"  v-for="(item,index) in list" :key='index'>
									<view class="itemWrap">
												<view class="item_text" @click="selectAddress(item)">
														<view class="left">
																	<view class="line1">
																			<text>{{item.name}} </text><text class="mobile">{{item.mobile}}</text> <text class="defaultTag" v-if="item.def">默认</text>
																	</view>
																	<view class="addr">{{item.detail}}</view>
														</view>
															
												</view>
												
												<view class="editWrap" @click="edit(item)">
														<text>编辑</text>	
												</view>
									</view>
									
														
							</view>
								
			</view>					
					
					
			
			<view class="footer">
				 <view class="add_btn" @click="add_btn">添加地址</view>
			</view>
			
			<!-- </view> -->
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../common/util.js');
import { cityData, cityUtil } from '../../common/cityData.js';
export default {
    data() {
        return {
            // nodata: ,
            list: [],
            isFirst: true
        };
    },
    onLoad() {
        // this.getList();
    },
    onShow() {
        // console.log(this.isFirst);
        this.list = [];
        this.getList();
    },
    methods: {
        edit(item) {
            // console.log(item.id, 11111);
            uni.navigateTo({
                url: './editAddress?id=' + item.id
            });
            this.isFirst = false;
            this.list = [];
        },
        add_btn() {
            uni.navigateTo({
                url: './addMyAddress?id=' + 0
            });
            this.isFirst = false;
            this.list = [];
        },
        selectAddress(item) {
            uni.setStorageSync('receiveInfo', item);
            uni.navigateBack({
                delta: 1
            });
        },
        getList() {
            uni.showLoading({
                title: '正在加载...'
            });
            util.ajax(
                'userAddresses',
                {
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        console.log(json.data);
                        for (let i = 0; i < json.data.length; i++) {
                            json.data[i].detail =
                                cityUtil.getAreaById(json.data[i].areaId) +
                                ' ' +
                                json.data[i].detail;
                            this.list.push(json.data[i]);
                        }
						console.log(this.list)
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        }
    },
    components: {
        uniIcon
    }
};
</script>

<style lang="less">
@import '../../common/icon.css';
@import '../../common/uni.css';
.addrList {
    flex: 1;
    flex-direction: column;
    width: 100%;
    .list {
        flex-direction: column;
        background: white;
        height: auto;
        .item {
            width: 100%;
            // height: 200upx;
            height: 150upx;
            padding: 0 30upx;
            box-sizing: border-box;

            .itemWrap {
                width: 100%;
                border-top: 1upx solid #eeeeee;
                justify-content: space-between;
                .item_text {
                    width: 80%;
                    font-size: 30upx;
                    color: #333333;
                    align-items: center;
                    .left {
                        flex-direction: column;
                        .line1 {
                            .mobile {
                                margin: 0 20upx 0 50upx;
                            }
                            .defaultTag {
                                display: inline-flex;
                                background: #ff1268;
                                color: white;
                                border-radius: 20upx;
                                padding: 0 10upx;
                                font-size: 24upx;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                        .addr {
                            font-size: 26upx;
                            margin-top: 15upx;
                        }
                    }
                }
                .editWrap {
                    width: 20%;
                    align-items: center;
                    text {
                        padding: 0 30upx;
                        border-left: 1upx solid #cccccc;
                        color: #666666;
                    }
                }
                .noAddress {
                    color: #ff1268;
                    flex-direction: row;
                    text {
                        margin-right: 10upx;
                    }
                }
                .icon {
                    align-items: center;
                    color: #cccccc;
                }
            }
        }
    }
    .footer {
        padding: 0 30upx;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        text {
            padding-left: 40upx;
            box-sizing: border-box;
            color: #666666;
            margin-top: 10upx;
            font-size: 22upx;
        }
        .add_btn {
            background: #ff1268;
            color: white;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 150upx auto 0;
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
        }
    }
}
</style>
